<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            padding:50px;
        }
        .left,.tip{
            float:left;
        }
        .left{margin-right:10px;}
        .tip{display:none;font-size:14px;}
    </style>
    <script>
        window.onload=function(){
            // 获取文本框和提示框
            var phone=document.getElementById("phone"),
                tip=document.getElementById("tip");
            // 给文本框绑定激活的事件
            phone.onfocus=function(){
                // 让tip显示出来
                tip.style.display='block';
            }
            // 给文本框绑定失去焦点的事件
            phone.onblur=function(){
                // 获取文本框的值,value用于获取表单元素的值
                var phoneVal=this.value;
                // 判断手机号码是否是11位的数字
                // 如果输入正确，则显示对号图标，否则显示错号图标
                if(phoneVal.length==11 && isNaN(phoneVal)==false){
                    tip.innerHTML='<img src="../img/right.png">';
                }else{
                    tip.innerHTML='<img src="../img/error.png">';
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="left">
        <input type="text" id="phone" placeholder="请输入手机号码">
    </div>
    <div class="tip" id="tip">
        请输入有效的手机号码
    </div>
</div>
</body>
</html>